<template>
  <div>
    <div class="flex items-center gap-4">
      <img :src="rightIcon" class="w-6 h-5" />
      阀门异常关断设置
    </div>
    <div
      class="mt-4 w-[480px] h-[160px] bg-white rounded-lg shadow flex flex-col items-center gap-8 py-8 box-border"
    >
      <div class="flex items-center justify-center gap-4">
        <span class="mr-10">关断时间</span>
        <el-input v-model="closeTime" class="!w-[160px]" />
      </div>
      <div class="flex items-center justify-center gap-4">
        <span class="mr-144">管道最大可操作压力</span>
        <el-input v-model="max_pressure" class="!w-[160px]" />
        <span>MPa</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import rightIcon from '@/assets/images/rightIcon.png'
// 响应式数据
const closeTime = ref('6')
const max_pressure = ref('2.5')

const validateSettings = () => {
  if (!closeTime.value) {
    ElMessage.error('关断时间不能为空')
    return
  }
  if (!max_pressure.value) {
    ElMessage.error('管道最大可操作压力不能为空')
    return
  }

  return true
}

const isFormValid = computed(() => {
  if (!closeTime.value || !max_pressure.value) return false
  return true
})

const getParamsData = () => {
  return {
    MAOP: max_pressure.value,
    T_err: closeTime.value
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style scoped></style>
